<template>
    <div class="container" style="width:99%;margin-top:-25px;">
	<!-- 查询条件 -->
    <div class="query-box">
        <el-form :model="queryBox" status-icon ref="queryBox">
          <el-row>
            <el-col :span="4">
                 <div class="depart-box">
                   <div class="slect-title">分中心名称</div>
                    <el-autocomplete
                      v-model="branchCenterName"
                      :fetch-suggestions="querySearchAsync"
                      placeholder="请输入内容"
                      @select="handleSelect"
                      
                    ></el-autocomplete>
                 </div> 
              </el-col>
            <el-col :span="4">
              <div class="depart-box">
                   <div class="slect-title">分中心编码</div>
                    <el-autocomplete
                      v-model="branchCenterCode"
                      :fetch-suggestions="querySearchAsync2"
                      placeholder="请输入内容"
                      @select="handleSelect2"
                      
                    ></el-autocomplete>
                 </div> 
               <!-- <el-form-item label="" prop="branchCenterCode">
                <el-input v-model="queryBox.branchCenterCode" placeholder="请输入编码">
                    <template slot="prepend">分中心编码</template>
                </el-input>
              </el-form-item> -->
            </el-col>
            <el-col :span="4">
               <div class="depart-box">
                  <div class="slect-title">客户类别</div>
                  <el-form-item>
                    <el-select clearable v-model="queryBox.brType" placeholder="请选择">
                        <el-option
                        v-for="item in br_type_options"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key">
                        </el-option>
                    </el-select>
                  </el-form-item>
                </div>
            </el-col>
            <el-col :span="4">
               <el-form-item label="" prop="code">
                <el-input v-model="queryBox.code" placeholder="客户编号">
                    <template slot="prepend">客户编号</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="" prop="name">
                <el-input v-model="queryBox.name" placeholder="学生名称">
                    <template slot="prepend">学生名称</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
             <el-col :span="4">
                <el-form-item label="" prop="oemAccount">
                <el-input v-model="queryBox.oemAccount" placeholder="请输入OEM卡号">
                    <template slot="prepend">OEM卡号</template>
                </el-input>
              </el-form-item>
            </el-col>
              <el-col :span="4">
               <el-form-item label="" prop="school">
                <el-input v-model="queryBox.school" placeholder="学校名称">
                    <template slot="prepend">学校名称</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
               <div class="depart-box">
                  <div class="slect-title">客户来源</div>
                   <el-select filterable clearable v-model="queryBox.dataFrom" placeholder="请选择" >
                      <el-option
                      v-for="item in student_data_from_options"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key">
                      </el-option>
                  </el-select>
                </div>
            </el-col>
            <el-col :span="4">
              <div class="depart-box">
                  <div class="slect-title">客户进展</div>
                  <el-form-item @change="student_progress_change">
                    <el-select clearable v-model="queryBox.progress" placeholder="请选择">
                        <el-option
                        v-for="item in student_progress_options"
                        :key="item.value"
                        :label="item.value"
                        :value="item.key">
                        {{item.value}}
                        </el-option>
                    </el-select>
                  </el-form-item>
                </div>
            </el-col>
             <el-col :span="4">
                <el-form-item label prop="phone">
                  <el-input v-model="queryBox.phone" placeholder="手机号码">
                    <template slot="prepend">手机号码</template>
                  </el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
             <el-col :span='7'>
               <div class="depart-box">
                  <div class="slect-title">创建时间</div>
                   <el-date-picker
                      v-model="createDate"
                      type="daterange"
                      :start-placeholder="'开始时间'"
                      :end-placeholder="'结束时间'"
                      range-separator="至"
                      :default-time="['00:00:00', '23:59:59']"
                       value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
            </el-col>
            <el-col :span='7'>
               <div class="depart-box">
                  <div class="slect-title">最新跟进时间</div>
                   <el-date-picker
                      v-model="trackingDate"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :default-time="['00:00:00', '23:59:59']" 
                      value-format="yyyy-MM-dd HH:mm:ss" 
                      format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </div>
            </el-col>
          </el-row>
        </el-form>
        <div class="from-btns">
            <kt-button :label="$t('action.reset')" perms="true" type="primary" @click="reset('queryBox')"/>
            <kt-button :label="$t('action.search')" perms="true" type="primary" @click="search"/>
        </div>
    </div>
  <!-- 批量删除按钮 -->
  <div class="add-btns fl">
    <kt-button label="批量分配至总部" :disabled="this.selections.length===0" 
    perms="customerownership:subcenter:batchdistribution" type="primary" @click="handlebatchdistribution"/>
  </div>
   
  	<!--表格内容栏-->
	<Crm-table @selectionChange="selectionChange" Subcenter   showBatchDelete
    permsSee='customerownership:subcenter:see'
    class="table-width" width="400" :loading='loading'
		:data="pageResult" :columns="columns" @findPage='findPage' @handleSee='handleSee'>
	</Crm-table >
	<!--批量分配-->
    <div class="batchdistribution-pop">
      <el-dialog
        :visible.sync="batchdistribution"
        @close="$emit('update:batchdistribution', false)"
        width="30%"
      >
      <el-row>
        <el-col :span="24">
          <span class="batchdistribution-pop-tit">客户分配</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span class="checked-person">已经选择{{selections.length}}位客户</span>
        </el-col>
      </el-row>
        <el-form :inline="true" :model="addstuformData" class="demo-form-inline">
          <el-row>
            <el-col :span="6">
              <span class="tit">划分方式：</span>
            </el-col>
            <el-col :span="18">
              <el-select
                clearable
                v-model="deptmodeoptionsValue"
                placeholder="请选择"
                @change="deptmodeoptionsChange">
                <el-option
                  v-for="item in deptmodeoptions"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row  style="margin:5% 0 5% 0"   v-if="isShowFlag==1||isShowFlag==2">
            <el-col :span="6">
              <span class="tit">选择部门：</span>
            </el-col>
            <el-col :span="18">
               <popup-tree-input
                :data="deptData"
                :props="deptTree"
                :prop="deptinputValue"
                :currentChangeHandle="handleTreeSelectChange3Add"
              ></popup-tree-input>
            </el-col>
          </el-row>
          <el-row style="margin-top:5%"  v-if="isShowFlag==2">
            <el-col :span="24">
              <el-row>
                <el-col :span="6">
                  <span class="tit">人员选择：</span>
                </el-col>
                <el-col :span="18">
                  <el-select
                    clearable
                    v-model="deptuseroptionValue"
                    placeholder="请选择"
                    @change="deptuserchange">
                    <el-option
                      v-for="item in deptuseroption"
                      :key="item"
                      :label="item.realName"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="batchdistribution = false">取 消</el-button>
          <el-button type="primary"  v-if="isShowFlag==1" @click="batchdistributionsubmitdept">确 定</el-button>
          <el-button type="primary" v-if="isShowFlag==2" @click="batchdistributionsubmituser">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import CrmSwitch from "@/views/Core/CrmSwitch";
import { CodeToText } from "element-china-area-data";
import axios from "axios";
export default {
  name: "Student",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    CrmSwitch
  },
  data() {
    return {
      isShowFlag: 0, //0:初始化部门、人员不显示  1:部门显示 2：人员显示
      checkedPeson: 0,
      size: "small",
      // filters: {
      //   name: ""
      // },
      // 查询条件
      student_data_from_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_type_options:[],
      student_progress_options: [
        {
          label: " ",
          key: " "
        }
      ],
      student_student_data_from_type_options: [
        {
          label: " ",
          key: " "
        }
      ],
      // 客户类别
      companyCustomer_options:[
        {
          key:'2',
          value:'总部分配'
        },
        {
          key:'3',
          value:'OEM卡激活'
        }
      ],
      // 分中心名称
      restaurants: [],
      branchCenterName: '',
      branchCenterCode:'',
      timeout:  null,
      queryBox: {
        name: "",
        dataFrom: "",
        type: "",
        dataFromType: "",
        progress: "",
        code: "",
        phone: "",
        school: "",
        providerTeacher: "",
        providerAgent: "",
        createDate: "",
        moveDate: "",
        belongToPerson: "",
        pageNum:0,
        pageSize:0,
        importDepartment: "",
        branchCenterCode:"",
        oemAccount:"",
        companyCustomer:'',
        brType:''
      },
      width: 200,
      columns: [
        { type:'index', label: "序号", minWidth: 50 },
        { prop: "branchCenterName", label: "分中心名称", minWidth: 180 },
        { prop: "branchCenterCode", label: "分中心编码", minWidth: 80 },
        { prop: "brType", label: "客户类别", minWidth: 100 },
        { prop: "code", label: "客户编号", minWidth: 150 },
        { prop: "name", label: "学生姓名", minWidth: 100 },
        { prop: "oemAccount", label: "学籍号(OEM卡号)", minWidth: 150 },
        { prop: "school", label: "学校名称", minWidth: 100 },
        { prop: "laiyuan", label: "客户来源", minWidth: 90 },
        { prop: "getprogress", label: "客户进展", minWidth: 70 }, 
        { prop: "diqu", label: "地区", minWidth: 190 },
        { prop: "areaInput", label: "详细地址", minWidth: 120 },
        { prop: "createDate", label: "创建时间", minWidth: 140 },
        { prop: "trackingDate", label: "最新跟进时间", minWidth: 140 }
      ],
      pageRequest: { pageNum: 1, pageSize: 8 },
      pageResult: {
        content: []
      },
      operation: true, // true:新增, false:编辑
      batchdistribution: false, //显示批量分配弹窗
      customerownership: false, //显示客户归属弹窗
      selectionsLength: "",
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      roles: [],
      selections: [], //选中列表集合
      ids: [], //分配ID集合
      ids2: [],
      deptData: [], //部门树
      deptTree: {
        label: "deptName",
        children: "children"
      },
      deptinputValue: "",
      // 划分方式
      deptmodeoptions: [
        {
          label: "分配至部门",
          value: "11"
        },
        {
          label: "分配至个人",
          value: "9"
        }
      ],
      br_type_options:[],
      deptmodeoptionsValue: "",
      submitID: "",
      deptId: "",
      userID: "", //人员ID
      deptuseroption: [], //部门用户
      deptuseroptionValue: "",
      branchcenter: [], //分中心下拉
      branchcenterValue: "",
      branchcenterValueID: "",
      branchcenterCodeValue: "", //分中心编码
      addstuformData: {},
      createDate:'',
      trackingDate:'',
      loading: false, // 加载标识
    };
  },
  methods: {
    // 搜索
    search() {
      this.loading = true;
      this.queryBox.createDateStart=this.createDate[0]
      this.queryBox.createDateEnd=this.createDate[1]
      this.queryBox.trackingDateStart=this.trackingDate[0]
      this.queryBox.trackingDateEnd=this.trackingDate[1]
      this.pageRequest.pageNum = 1;
      this.findPage(null)
    },
    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }
      this.queryBox.pageSize = this.pageRequest.pageSize;
      this.queryBox.pageNum = this.pageRequest.pageNum;
      this.$api.student
        .studentQueryBrCustomer(this.queryBox)
        .then(res => {
          let content = {'content':res.listStudentInfo,'totalSize':res.total};
          this.pageResult=content;
          this.pageResult.content.forEach(item => {
           if(item.province==null&&item.city==null||item.province=='null'&&item.city=='null'){
                item.diqu=""
              }else{
                item.diqu = CodeToText[item.province] + CodeToText[item.city]+ CodeToText[item.area]+(item.areaInput==null?'':item.areaInput);
            }
            this.student_data_from_options.forEach(type_item=>{
              if(type_item.key==item.dataFrom){
                item.laiyuan=type_item.value
              }
            })
            this.student_progress_options.forEach(progress_item=>{
              if(progress_item.key==item.progress){
                item.getprogress=progress_item.value
              }
            })
            // 转换客户类别
            this.br_type_options.forEach(Citem=>{
              if(Citem.key==item.brType){
                item.brType=Citem.value
              }
            })
            // 获取方式对应
            this.student_data_from_type_options.forEach(data_from_type_item=>{
              if(data_from_type_item.key==item.dataFromType){
                item.getType=data_from_type_item.value
              }
            })
          });
          this.loading = false
        })
        .then(data != null ? data.callback : "");
    },
    // 加载用户角色信息
    // findUserRoles: function() {
    //   this.$api.role.findAll().then(res => {
    //     // 加载角色集合
    //     this.roles = res.data;
    //   });
    // },
    // 重置
    reset(queryBox) {
      this.$refs.queryBox.resetFields();
      this.queryBox.type=''
      this.queryBox.dataFrom=''
      this.queryBox.progress=''
      this.queryBox.providerAgent=''
      this.queryBox.dataFromType='',
      this.branchCenterName='',
      this.queryBox.belongTo=''
      this.queryBox.branchCenterCode=''
      this.branchCenterCode=''
      this.queryBox.brType=''
      this.queryBox.createDateStart=''
      this.createDate = "";
      this.queryBox.createDateEnd=''
      this.trackingDate=''
      this.queryBox.trackingDateStart=''
      this.queryBox.trackingDateStart=''
      this.pageRequest.pageNum = 1;
      this.findPage(null)
    },
    // 批量分配
    handlebatchdistribution(params) {
      this.batchdistribution = true;
      this.ids = [];
      let idstu = this.selections.map(item => item.id);
      // this.dataFormAdd = Object.assign({}, params.row);
      this.ids = idstu;
      this.deptmodeoptionsValue=''
      this.deptinputValue=''
      this.deptuseroptionValue=''
      this.isShowFlag=0
    },
    // 批量分配分总部
    batchdistributionsubmit() {
      this.$api.user
        .studentAssign_customerManager({
          listStudentId: this.ids,
          belongType: 7,
          belongTo: this.branchcenterValueID
        })
        .then(res => {
          if (res.result === 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.batchdistribution = false;
            this.findPage(null)
          } else {
            this.$message({
              message: res.msg,
              type: "success"
            });
          }
        });
    },
     // 批量分配至总部 部门
    batchdistributionsubmitdept() {
      this.$api.user
        .studentAssign_customerManager({
          listStudentId: this.ids,
          belongType: 11,
          belongTo: this.deptId,
        })
        .then(res => {
          if (res.result === 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.batchdistribution = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        });
    },
    // 批量分配到总部个人
    batchdistributionsubmituser() {
      this.$api.user
        .studentAssign_customerManager({
          listStudentId: this.ids,
          belongType: 9,
          belongTo: this.userID,
    
        })
        .then(res => {
          if (res.result === 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.batchdistribution = false;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        });
    },
    branchcenterChange(value) {
      this.branchcenterValue = value.name;
      this.branchcenterCodeValue = value.code;
      this.branchcenterValueID = value.id;
    },
    // 查看客户档案
    handleSee: function(params) {
       this.dataForm = Object.assign({}, params.row);
      // console.log(params.row)
      this.$router.push({
        path: "/Customerfile/Student",
        query: {
          id: this.dataForm.id
        }
      });
    },
    // 新增客户
    handleNewADD: function() {
      this.$router.push({
        path: "/Customerfile/AddStudent"
      });
    },
    selectionChange: function(params) {
      let selectionsLength = params.selections.length;
      this.selections = selections.selections;
    },
    // 获取选中的表格数据
    selectionChange: function(selections) {
      this.selections = selections.selections;
    },
    // 修改客户档案
    handleEdit: function(params) {
      this.dataForm = Object.assign({}, params.row);
      // console.log(params.row)
      this.$router.push({
        path: "/Customerfile/EditStudent",
        query: {
          id: this.dataForm.id
        }
      });
    },
    // 菜单树选中
    handleOptionClick() {},
    // 获取来源
    get_student_data_from() {
      this.$api.user
        .optionsList({ codeType: "student_data_from" })
        .then(res => {
          this.student_data_from_options = res.keyValueList;
        });
    },
    get_student_progress() {
      this.$api.user.optionsList({ codeType: "student_progress" }).then(res => {
        this.student_progress_options = res.keyValueList;
      });
    },
    student_progress_change(value) {
      this.queryBox.student_progressValue = value.toString();
    },
    // 获取部门数据
    get_dept_data() {
      this.$api.dropdown.deptLevel3().then(res => {
        this.deptData = res.departmentInfoList;
      });
    },
    // 点击部门
    handleTreeSelectChange3Add(data, node) {
      this.deptinputValue = data.deptName;
      this.deptId = data.id;
      this.deptuseroptionValue=''
      this.get_dept_user();
    },
    //划分方式 控制部门人员显示
    deptmodeoptionsChange(value) {
      if (value == 9) {
        this.isShowFlag = 2;
      } else if (value == 11) {
        this.isShowFlag = 1;
      } else {
        this.isShowFlag = 0;
      }
    },
    // 获取部门用户
    get_dept_user() {
      this.$api.student.queryUserList({ threeLevelDeptId: this.deptId,accountStatus:1,isControlResource: 1}).then(res => {
        this.deptuseroption = res.userInfoList;
        // this.userID=res.userInfoList.id
        console.log(res);
      });
    },
    deptuserchange(value) {
      this.userID = value;
    },
    get_student_type() {
      this.$api.user.optionsList({ codeType: "student_type" }).then(res => {
        this.student_type_options = res.keyValueList;
      });
    },
    get_student_data_from_type(){
      this.$api.user.optionsList({ codeType: "student_data_from_type" }).then(res => {
        this.student_data_from_type_options= res.keyValueList;
      });
      this.$api.user.optionsList({ codeType: "student_br_type" }).then(res => {
        this.br_type_options= res.keyValueList;
      });
    },
    student_parent_type_change(value) {
      this.info.studentInfoDetail.studentInfoAttr.parentType = value.toString();
    },
    // 解锁锁定
    changeSwitch:function (data) {
        this.$api.student.studentInfoLock({
          studentId:data.row.id,
          isLock:data.row.isLock
        }).then(res =>{
          if (res.result == 1) {
            this.$message({ message: res.msg, type: "success" });
          } else {
            this.$message({message: res.msg, type: "error"
            });
          }
          this.findPage(null)
          }
        )
    },
    // 获取分中心
    get_branchcenter() {
      this.$api.dropdown.branchcenter().then(res => {
        this.branchcenter = res.branchCenterInfoList.splice('')
      });
    },
    // 分中心远程搜索
    querySearchAsync(queryString, callback) {
      let restaurants = [{}];
      let results=''
      this.$api.dropdown.branchcenter().then(res => {
        for(let i of res.branchCenterInfoList){
              i.value = i.name;  //将想要展示的数据作为value
          }
        restaurants =res.branchCenterInfoList;
       results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        callback(results);
      })
    },
    createFilter(queryString) {
      return (restaurant) => {
          return (restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    handleSelect(item) {
      this.queryBox.belongTo=item.id
    },
    querySearchAsync2(queryString, callback) {
      let restaurants = [{}];
      let results=''
      this.$api.dropdown.branchcenter().then(res => {
        for(let i of res.branchCenterInfoList){
              i.value = i.code;  //将想要展示的数据作为value
          }
        restaurants =res.branchCenterInfoList;
       results = queryString ? restaurants.filter(this.createFilter2(queryString)) : restaurants;
        callback(results);
      })
    },
    createFilter2(queryString) {
      return (restaurant) => {
          return (restaurant.code.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
    },
    handleSelect2(item) {
      this.queryBox.belongTo=item.id
    },
  },
  mounted() {
    this.get_student_data_from();
    this.get_student_progress();
    this.get_dept_data();
    this.get_branchcenter();
    this.get_student_type()
    this.get_student_data_from_type()
  }
};
</script>
<style >
@import url("../../assets/queryBox.css");
</style>
<style lang='scss' scoped>
.checked-person {
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin: 3% 0 3% 0;
}
.batchdistribution-pop-tit{
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  color: #303133;
}
.demo-form-inline{
  width: 90%;
  margin: 0 auto;
  .el-dialog__body .el-input{
    width: 93% !important;
  }
  .el-select{
    width: 100% !important;
  }
  .tit{
    display: inline-block;
    margin-top: 10%;
  }
}
</style>
<style lang='scss'>
.batchdistribution-pop .el-dialog__header{
  padding: 0 0 0 0 !important;
}
</style>


